<script>
//哪个页面需要发请求给服务器，在此页面导入axios（前提需要npm安装了axios库）
import axios from "axios";

//用axios创建一个http对象
const http = axios.create({
  //设置服务器基础地址（协议：//IP：端口）
  baseURL: 'http://localhost:8888/',
  //设置请求超时时间（单位是毫秒）
  timeout: 15000,
  // 设置数据传递格式和字符集 (固定配置, 如果不写, 服务器可能无法接收数据或者接收到乱码)
  headers: {'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},
})
export default {
  name: "ProductSavePage",
  data() {
    return {
      product: {
        //定义一个商品对象,用于存储用户在页面上输入的数据
        name: null,
        brand: null,
        price: null,
        discount: null,
        stock: null
      }
    }
  },
  methods:{
    handleSubmit() {
      this.$confirm('确定要提交吗?','提示', {
        confirmButtonText:'确定',
        cancelButtonText:'取消'
      }).then(() => {
        http.post('/product/save', this.product)
            .then((result) => {
              if(result.data.code == '1') {
                this.$notify.success(result.data.message)
              }else if (result.data.code == '-1') {
                this.$notify.error(result.data.message)
              }
            })
            .catch((error) => {
              this.$notify.error('服务器请求失败，请稍后重试')
            })
      }).catch(() => {})
    }
  }
}

</script>

<template>
<div>
  <el-card style="width: 800px;margin: 20px auto">
    <div slot="header">
      <span>新增商品</span>
    </div>
    <div>
      <el-form :model="product">
      <el-form-item label="商品名称">
        <el-input v-model="product.name" placeholder="商品名称"/>
      </el-form-item>
      <el-form-item label="商品品牌">
        <el-input v-model="product.brand" placeholder="商品品牌"/>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="product.price" placeholder="商品价格"/>
      </el-form-item>
      <el-form-item label="商品折扣">
        <el-input v-model="product.discount" placeholder="商品折扣"/>
      </el-form-item>
      <el-form-item label="商品库存">
        <el-input v-model="product.stock" placeholder="商品库存"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button>重置</el-button>
      </el-form-item>
      </el-form>
    </div>
  </el-card>
</div>
</template>

<style scoped>

</style>